<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>简历表单</title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="./form.css">
  </head>
  <body>
    <form action="./receive.html" method="GET" target="targetIfr" id="signupForm" >
      <!-- <header>
        <span>最后更新时间</span><span>预览简历</span>
      </header> -->
      <section class="info-box">
        <p class="view">预览简历</p>
        <div class="view-info">
          <div class="left-info">
            <h2>基本信息</h2>
            <div class="base-info">
              <p>21年应届生</p>
              <p>本科学历</p>
              <p>在校-月内到岗</p>
              <p>15992958764</p>
            </div>
          </div>
          <div class="right-control">
            <img src="./Avatar.png" alt="">  
            <span  class="edit-btn" data-tag="0">编辑</span></div>
        </div>
        <div class="edit-info">
            <div class="form-box" id="first">
                <div class="form-item">
                    <label for="username" class="item-label">姓名</label>
                    <input type="text" name="username" id="username" placeholder="请输入您的姓名"  required />
                  </div>
                  <div class="form-item">
                    <label for="status">当前求职状态</label>
                    <select name="status" id="status">
                      <option value="1" data-style="status">离校-随时到岗</option>
                      <option value="2" data-style="status">在校-暂不考虑</option>
                      <option value="3" data-style="status">在校-考虑机会</option>
                      <option value="4" data-style="status">在校-月内到岗</option>
                    </select>
                  </div>
                  <div class="form-item">
                    <label for="sex" class="item-label">性别</label>
                    <div class="item-content">
                       <span  class="active"> <input
                        type="radio"
                        name="male"
                        value="0"
                        id="male"
                      /><p>男</p></span>
                    <span>
                        <input
                      type="radio"
                      name="male"
                      value="1"
                      id="female"
                    /><p>女</p>
                    </span>
                    </div>
                  </div>
                  <div class="form-item">
                    <label for="birthDay" class="item-label">生日</label>
                    <input type="date" name="birthDay" id="birthDay" required/>
                  </div>
                  <div class="form-item">
                    <label for="wechat" class="item-label">微信号(选填)</label>
                    <input type="text" name="wechat" id="wechat" placeholder="请输入您的微信号" />
                  </div>
                  <div class="form-item">
                    <label for="telephone" class="item-label">电话</label>
                    <input type="number" name="telephone" id="telephone" placeholder="请输入您的电话号码" required />
                  </div>
                  <div class="form-item">
                    <label for="mail" class="item-label">邮箱</label>
                    <input type="email" name="mail" id="mail" placeholder="请输入您的邮箱" required/>
                  </div>
                </div>
                  <div class="form-btns">
                    <button>取消</button>
                    <button>完成</button>
                  </div>
        </div>
      </section>
      <section class="info-box">
        <div class="view-info">
          <div class="left-info">
            <h3>个人优势</h3>
            <div class="base-info">
              <p>熟悉HTML5,CSS3和JS前端开发语言，具备良好的编程习惯。了解vue框架以及node.js,会使用uni-app进行小程序等多端开发；熟悉ES6语法，每天至少三个小时代码学习</p>
            </div>
          </div>
          <div class="right-control"><span  class="edit-btn" data-tag="1">编辑</span></div>
        </div>
        <div class="edit-info">
          <div class="form-box input-textarea">
            <div class="textarea">
              <textarea wrap="soft" required autocomplete="off" spellcheck="false" placeholder="例如：两年UI设计经验，熟悉IOS和Android的界面设计规范，对产品本色有独特见解，有一定的手绘基础" name="message" rows="2">
              </textarea>
            </div>
          </div>
          <div class="form-btns">
            <button>取消</button>
            <button>完成</button>
          </div>
        </div>
      </section>
      <section class="info-box">
        <div class="view-info">
          <div class="left-info">
            <h3>期望职位</h3>
            <div class="base-info">
              <p>web前端</p>
              <p>5-6K</p>
              <p>不限</p>
              <p>深圳</p>
            </div>
          </div>
          <div class="right-control"><span  class="edit-btn" data-tag="2">编辑</span></div>
        </div>
        <div class="edit-info">
          <div class="form-box input-select">
            <div class="form-item">
              <label for="jobtype">求职类型</label>
              <select name="jobtype" id="jobtype">
                <option value="1" data-style="jobtype">全职</option>
                <option value="2" data-style="jobtype">实习</option>
                <option value="3" data-style="jobtype">兼职</option>
              </select>
            </div>
            <div class="form-item">
              <label for="hopejob">期望职位</label>
              <select name="hopejob" id="hopejob">
                <option value="1" data-style="hopejob">web前端</option>
                <option value="2" data-style="hopejob">web后端</option>
                <option value="3" data-style="hopejob">测试</option>
              </select>
            </div>
            <div class="form-item">
              <label for="hopecity">城市</label>
              <select name="hopecity" id="hopecity">
                <option value="1" data-style="hopecity">广州</option>
                <option value="2" data-style="hopecity">深圳</option>
                <option value="3" data-style="hopecity">佛山</option>
              </select>
            </div>
            <div class="form-item">
              <label for="hopepay">薪资要求</label>
              <select name="hopepay" id="hopepay">
                <option value="1" data-style="hopepay">5K</option>
                <option value="2" data-style="hopepay">6K</option>
                <option value="3" data-style="hopepay">7K</option>
              </select>
            </div>
          </div>
          <div class="form-btns">
            <button>取消</button>
            <button>完成</button>
          </div>
        </div>
      </section>
      <section class="info-box">
        <div class="view-info">
          <div class="left-info">
            <h3>实习经历</h3>
            <p>添加</p>
            <div class="base-info">
                <div class="info-textarea">1</div>
                <div class="right-control"><span  class="edit-btn" data-tag="3">编辑</span></div>
            </div>
          </div>
        </div>
        <div class="edit-info">
          <p>这是表单填写区域</p>
          <div class="form-btns">
            <button>取消</button>
            <button>完成</button>
          </div>
        </div>
      </section>
      <section class="info-box">
        <div class="view-info">
          <div class="left-info">
            <h3>项目经历</h3>
            <p>添加</p>
            <div class="base-info">
                <div class="info-textarea">
                    <p>● 该项目是用于对Vue进一步熟悉的项目，也是为了对于新技术的一次尝鲜，最终要达到的目标是让该项目达到像Ant Design等前端优秀UI组件库一样的规模</br>
                      ● 基于Vue3+TypeScript技术栈进行开发</p>
                </div>
                <div class="right-control"><span  class="edit-btn" data-tag="4">编辑</span></div>
            </div>
          </div>
        </div>
        <div class="edit-info">
          <p>这是表单填写区域</p>
          <div class="form-btns">
            <button>取消</button>
            <button>完成</button>
          </div>
        </div>
      </section>
      <section class="info-box">
        <div class="view-info">
          <div class="left-info">
            <h3>教育经历</h3>
            <p>添加</p>
            <div class="base-info">
                <div class="info-textarea">
                    <p>广东东软学院</p>
                    <p>2017-2021</p>
                    <p>软件工程</p>
                    <p>本科</p>  
                </div>
                <div class="right-control"><span  class="edit-btn" data-tag="5">编辑</span></div>
            </div>
          </div>
        </div>
        <div class="edit-info">
          <div class="form-box edu-input">
            <div class="form-item">
                <label for="schoolname" class="item-label">学校名称</label>
                <input type="text" required name="schoolname" id="schoolname" placeholder="请输入您的学校" />
              </div>
              <div class="form-item">
                <label for="properties" class="item-label">教育性质</label>
                <div class="item-content">
                   <span class="active"> <input
                    type="radio"
                    name="allproperties"
                    value="0"
                    id="allproperties"
                  /><p>全日制</p></span>
                <span>
                    <input
                  type="radio"
                  name="halfproperties"
                  value="1"
                  id="halfproperties"
                /><p>非全日制</p>
                </span>
                </div>
              </div>
              <div class="form-item">
                <label for="edu">学历</label>
                <select name="edu" id="edu">
                  <option value="1" data-style="edu">初中及以下</option>
                  <option value="2" data-style="edu">中专/中技</option>
                  <option value="3" data-style="edu">高中</option>
                  <option value="4" data-style="edu">大专</option>
                  <option value="5" data-style="edu">本科</option>
                </select>
              </div>
              <div class="form-item">
                <label for="professional">专业</label>
                <select name="professional" id="professional">
                  <option value="1" data-style="professional">软件工程</option>
                  <option value="2" data-style="professional">电子信息工程</option>
                  <option value="3" data-style="professional">人工智能大数据</option>
                </select>
              </div>
          </div>
          <div class="form-btns">
            <button>取消</button>
            <button>完成</button>
          </div>
        </div>
      </section>
      <section class="info-box">
        <div class="view-info">
          <div class="left-info">
            <h3>社交主页</h3>
            <p>添加</p>
            <div class="base-info">
                <div class="info-textarea">
                    <p>http://www.xiaohui.ac.cn</p> 
                </div>
                <div class="right-control"><span  class="edit-btn" data-tag="6">编辑</span></div>
            </div>
          </div>
        </div>
        <div class="edit-info">
          <div class="form-item">
              <label for="url">网址输入</label>
              <input type="url" required name="url" id="url" placeholder="请输入合法网址" />
          </div>
          <div class="form-btns">
            <button>取消</button>
            <button>完成</button>
          </div>
        </div>
      </section>
      <footer>
        <button id="submit" type="submit">提交</button>
      </footer>
    </form>
    <iframe name="targetIfr"  style="display:none"></iframe>
    <script src="./jquery.js"></script>
    <script src="./jquery.validate.js"></script>
    <script src="./messages_zh.js"></script>
    <script src="./animatescroll.js"></script>
    <link rel='stylesheet' type='text/css' href='./notyf.min.css' />                
<script src="./notyf.min.js"></script>
    <script src="./index.js"></script>
  </body>
</html>
